<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 44 44"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path data-follow-fill="#000" d="M26.118 38.498H9.225a3.73 3.73 0 0 1-3.73-3.733V9.229a3.731 3.731 0 0 1 3.73-3.734H34.76a3.71 3.71 0 0 1 2.64 1.094 3.707 3.707 0 0 1 1.09 2.638l-.057 16.89v.005a1.376 1.376 0 0 0 2.752.004l.057-16.893V9.23a6.478 6.478 0 0 0-6.481-6.482H9.224A6.473 6.473 0 0 0 2.747 9.23v25.536a6.472 6.472 0 0 0 6.478 6.48h16.893a1.374 1.374 0 0 0 0-2.747Z" :fill="_fill"/><path data-follow-fill="#000" d="m40.843 38.9-5.245-5.244a8.26 8.26 0 1 0-1.943 1.942l5.245 5.246a1.374 1.374 0 0 0 1.943-1.943Zm-11.969-4.524a5.5 5.5 0 1 1 3.89-1.611 5.465 5.465 0 0 1-3.89 1.611ZM33 15.134a1.377 1.377 0 0 0 0-2.756l-22-.007a1.376 1.376 0 0 0-1.374 1.376c0 .759.615 1.38 1.373 1.38l22 .007Zm-13.75 8.242a1.374 1.374 0 1 0 0-2.747H11a1.372 1.372 0 0 0 0 2.745l8.25.002ZM11 28.871a1.374 1.374 0 0 0 0 2.747h5.5a1.371 1.371 0 1 0 0-2.744L11 28.87Z" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Frame_9ppk22f3 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
